<form (ngSubmit)="query()" [formGroup]="searchForm" class="search-area" fxLayoutGap="16px">
  <mat-form-field floatLabel="never">
    <mat-select [placeholder]="'workshop'|translate" formControlName="workshopId" required>
      <mat-option *ngFor="let workshop of workshops$|async" [value]="workshop.id">
        {{workshop.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div class="mat-form-field" style="width: 300px;">
    <input [formControl]="rangeCtrl" [max]="maxDate" [owlDateTimeTrigger]="rangePicker" [owlDateTime]="rangePicker" [placeholder]="('Common.startDate'|translate)+' ~ '+('Common.endDate'|translate)" matInput readonly required selectMode="range">
    <owl-date-time #rangePicker></owl-date-time>
  </div>

  <button [disabled]="searchForm.invalid" color="primary" mat-icon-button tabindex="-1">
    <mat-icon>search</mat-icon>
  </button>

  <span fxFlex></span>
  <button (click)="download()" mat-mini-fab tabindex="-1" type="button">
    <mat-icon>get_app</mat-icon>
  </button>
</form>

<mat-divider></mat-divider>

<mat-table [dataSource]="items$" fxFlex>
  <ng-container matColumnDef="operator">
    <mat-header-cell *matHeaderCellDef>{{'operator'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.operator.name}}</mat-cell>
    <mat-footer-cell *matFooterCellDef>{{'Common.sum'|translate}}</mat-footer-cell>
  </ng-container>

  <ng-container matColumnDef="count">
    <mat-header-cell *matHeaderCellDef>{{'count'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">
      <ng-container *ngTemplateOutlet="detailInfoTemp;context:{info:row}"></ng-container>
    </mat-cell>
    <mat-footer-cell *matFooterCellDef>
      <ng-container *ngTemplateOutlet="detailInfoTemp;context:{info:totalInfo()}"></ng-container>
    </mat-footer-cell>
  </ng-container>

  <ng-container matColumnDef="btns">
    <mat-header-cell *matHeaderCellDef>{{'Common.operation'|translate}}</mat-header-cell>
    <mat-cell (click)="detailDialog(row)" *matCellDef="let row" matRipple>
      <mat-icon>edit</mat-icon>
    </mat-cell>
    <mat-footer-cell *matFooterCellDef></mat-footer-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  <mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></mat-footer-row>
</mat-table>

<ng-template #detailInfoTemp let-info="info" let-s="s">
  <mat-list dense>
    <mat-list-item>
      <div fxLayout fxLayoutGap="16px" matLine>
        <span>{{('silkCar')|translate}}</span>
        <span>{{info?.silkCarRecordCount}}</span>
      </div>
    </mat-list-item>
    <mat-list-item>
      <div fxLayout fxLayoutGap="16px" matLine>
        <span>{{('silkCount')|translate}}</span>
        <span>{{info?.silkCount}}</span>
      </div>
    </mat-list-item>
  </mat-list>
</ng-template>
